<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="dePForm">
    <el-form-item label="员工姓名" prop="name">
      <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>
    <el-form-item label="性别" prop="sex">
      <el-radio-group v-model="ruleForm.sex">
        <el-radio label="男"></el-radio>
        <el-radio label="女"></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="部门" prop="department">
      <el-select v-model="ruleForm.department" clearable placeholder="请选择">
        <el-option
            v-for="item in ruleForm.departmentArr"
            :key="item.id"
            :label="item.name"
            :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="职务" prop="job">
      <el-select v-model="ruleForm.job" clearable placeholder="请选择">
        <el-option
            v-for="item in ruleForm.jobArr"
            :key="item.id"
            :label="item.name"
            :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="ruleForm.email"></el-input>
    </el-form-item>
    <el-form-item label="电话" prop="phone">
      <el-input v-model="ruleForm.phone"></el-input>
    </el-form-item>
    <el-form-item label="描述" prop="desc">
      <el-input type="textarea" v-model="ruleForm.desc" :rows="5"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">立即创建/更新</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
      <el-button @click="back">取消</el-button>
    </el-form-item>
  </el-form>

</template>

<script>
import {getList, addUser, getJoblist, updataUser, getUserInfo} from "../../../api/api";

export default {
  data() {
    return {
      ruleForm: {
        name: '',
        sex: '',
        department: '',
        job: '',
        email:'',
        phone:'',
        desc: '',
        departmentArr:[],
        jobArr:[]
      },
      rules: {
        name: [
          { required: true, message: '请输入员工姓名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: 'blur' }
        ],
        department: [
          { required: true, message: '请选择部门', trigger: 'change' }
        ],
        job: [
          { required: true, message: '请选择职务', trigger: 'change' }
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        desc: [
          { required: true, message: '请填写描述', trigger: 'blur' }
        ]
      },
    };
  },
  created() {
    this.id = this.$route.query.id
    this.id && this.getUserInfo()

    getList().then(data => {
      let arrList = data.data;
      arrList.forEach(item => {
        let obj = {}
        obj.id = item.id
        obj.name = item.name
        this.ruleForm.departmentArr.push(obj)
      })
    })
    getJoblist().then(data => {
      let arrList = data.data;
      arrList.forEach(item => {
        let obj = {}
        obj.id = item.id
        obj.name = item.name
        this.ruleForm.jobArr.push(obj)
      })
    })
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 如果路由中的id存在，就执行updata方法
          let sex = this.ruleForm.sex === '男'? 0 : 1
          if(this.id) {
            updataUser({
              userId: this.id,
              name: this.ruleForm.name,
              sex: sex,
              email: this.ruleForm.email,
              phone: this.ruleForm.phone,
              departmentId: this.ruleForm.department,
              jobId: this.ruleForm.job,
              desc: this.ruleForm.desc
            }).then(data => {
              if (data.code ===0) {
                // 修改成功
                this.$alert('修改成功', '提示', {
                  confirmButtonText: '确定',
                  callback: action => {
                    // 点击确定我们跳转到列表页
                    this.$router.push('/org/user')
                  }
                })
              } else {
                this.$alert('修改失败', '提示', {
                  confirmButtonText: '确定',
                  callback: action => {}
                })
              }
            })
          } else  {
            addUser({
              name: this.ruleForm.name,
              sex: sex,
              email: this.ruleForm.email,
              phone: this.ruleForm.phone,
              departmentId: this.ruleForm.department,
              jobId: this.ruleForm.job,
              desc: this.ruleForm.desc
            }).then(data => {
              if (data.code === 0) {
                // 新增成功
                this.$alert('新增成功', '提示', {
                  confirmButtonText: '确定',
                  callback: action => {
                    // 点击确定我们跳转到列表页
                    this.$router.push('/org/user')
                  }
                })
              } else {
                this.$alert('新增失败', '提示', {
                  confirmButtonText: '确定',
                  callback: action => {}
                })
              }
            })
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 获取员工详细信息
    getUserInfo() {
      let id = this.$route.query.id
      getUserInfo(id).then(data => {
        let sex = data.data.sex === 0? '男' : '女'
        this.ruleForm.name = data.data.name
        this.ruleForm.sex = sex
        this.ruleForm.email = data.data.email
        this.ruleForm.phone = data.data.phone
        this.ruleForm.department = parseInt(data.data.departmentId)
        this.ruleForm.job = parseInt(data.data.jobId)
        this.ruleForm.desc = data.data.desc
      })
    },
    // 取消修改返回上一级
    back() {
      this.$router.back()
    }
  },

}
</script>

<style scoped>
  .dePForm {
    text-align: left;
    width: 450px;
  }
</style>
